<template>
  <div id="app">
    <Navbar />
    <main>
      <section class="about-us">
        <h1>关于我们</h1>
        <p class="company-intro">
          我们是一家专业的软件公司，致力于为客户提供全方位的软件解决方案和优质的技术服务。凭借丰富的行业经验和专业的技术团队，我们在计算机软硬件及相关领域取得了显著的成绩。
        </p>
        <div class="service-list">
          <h2>我们的服务</h2>
          <ul>
            <li>计算机软硬件技术开发、咨询、转让与服务</li>
            <li>计算机网络工程技术开发、咨询、转让与服务</li>
            <li>大数据采集、分析、处理与服务</li>
            <li>网站设计、推广、管理与服务</li>
            <li>国内广告设计、制作、代理、发布</li>
            <li>互联网技术平台开发、咨询、运营、管理与服务</li>
            <li>企业营销策划</li>
            <li>计算机软件及辅助设备的销售与维修</li>
          </ul>
        </div>
        <div class="company-advantage">
          <h2>我们的优势</h2>
          <p>
            我们拥有一支高素质、富有创新精神的技术团队，能够紧跟行业发展趋势，不断推出满足市场需求的优质产品和服务。同时，我们注重客户体验，以客户需求为导向，为客户提供个性化的解决方案，确保客户满意度。
          </p>
        </div>
      </section>
    </main>
    <Footer />
  </div>
</template>

<script setup>
import Navbar from "@/components/Navbar/Navbar.vue";
import Footer from "@/components/Footer/Footer.vue";
</script>

<style scoped>
/* 整体页面布局 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.about-us {
  padding: 40px;
}

.company-intro {
  line-height: 1.6;
  margin-bottom: 30px;
}

.service-list {
  margin-bottom: 30px;
}

.service-list h2 {
  margin-bottom: 15px;
}

.service-list ul {
  list-style-type: disc;
  padding-left: 20px;
}

.company-advantage h2 {
  margin-bottom: 15px;
}
</style>